import React from 'react';
import {Dimensions, Platform, ScrollView} from 'react-native';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import HTML from 'react-native-render-html';
import * as ActionCreator from '../../actions/html-actions';
import _ from 'lodash';

class RichTextScreen extends React.PureComponent {
  static navigationOptions = ({navigation}) => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: navigation.getParam('title') || '',
  });

  state = {
    item: {
      content: '</br>',
    },
  };

  componentDidMount() {
    const {navigation} = this.props;
    const item = navigation.getParam('item');

    this.setState({
      item,
    });
  }

  render() {
    return (
      <ScrollView style={{flex: 1}}>
        <HTML
          html={_.get(this.state, 'item.content', '</br>')}
          imagesMaxWidth={Dimensions.get('window').width}
        />
      </ScrollView>
    );
  }
}

const mapStateToProps = state => ({
  appState: state.appState,
  content: state.html.content,
});

const mapDispatchToProps = dispatch => ({
  htmlActions: bindActionCreators(ActionCreator, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(RichTextScreen);
